<template>
  <div class="substation-container">
    <el-card shadow="hover" class="substation-card">
      <h2 class="substation-title">
        <span class="substation-icon">
          <img src="@/assets/icons/substation_icon.svg" class="icon" />
        </span>
        分站信息
      </h2>
      <el-row>
        <el-col :span="12">
          <el-descriptions :column="1" border>
            <el-descriptions-item label="分站号">
              <el-tag>{{ substation!.substationId }}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="分站名">
              {{ substation!.substationName }}
            </el-descriptions-item>
            <el-descriptions-item label="省">
              {{ substation.substationAddress!.province }}
            </el-descriptions-item>
            <el-descriptions-item label="市">
              {{ substation.substationAddress!.city }}
            </el-descriptions-item>
            <el-descriptions-item label="区">
              {{ substation.substationAddress!.zone }}
            </el-descriptions-item>
            <el-descriptions-item label="详细地址">
              {{ substation.substationAddress!.detail }}
            </el-descriptions-item>
            <el-descriptions-item label="分站库房ID">
              <el-tag>{{ substation!.subWarehouseId }}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="创建时间">
              <el-tag>{{ substation!.createTime }}</el-tag>
            </el-descriptions-item>
            <!-- <el-descriptions-item label="创建人ID">
              <el-tag>{{ substation!.creatorId }}</el-tag>
            </el-descriptions-item> -->
          </el-descriptions>
        </el-col>
        <el-col :span="12">
          <div class="img-box">
            <img src="@/assets/images\substation.jpg" style="width: 90%" />
          </div>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { Substation } from "@/api/interface";
import { getSubstationInfo } from "@/api/modules/substation";
import { useUserStore } from "@/stores/modules/user";
// import * as echarts from "echarts";
// import { editSubstationName } from "@/api/modules/substation";

const substation = ref<Substation.SubstationInfo>({
  substationId: 0,
  substationName: "",
  substationAddress: { province: "", city: "", zone: "", detail: "" },
  subWarehouseId: 0,
  createTime: new Date(),
  creatorId: 0
});
const userStore = useUserStore();

onMounted(async () => {
  try {
    const response = await getSubstationInfo({ substationId: userStore.userInfo.departmentId });
    substation.value = response.data;
  } catch (error) {
    console.error(error);
  }
  const mapContainer = document.getElementById("mapContainer");
  if (!mapContainer) {
    console.error("找不到地图容器元素");
    return;
  }
  // // 初始化echarts地图实例
  // const chart = echarts.init(mapContainer);

  // // 使用echarts设置地图数据和样式
  // const option = {
  //   // 配置地图的属性，例如地图类型、地图的视觉效果等
  //   // ...
  //   series: [
  //     {
  //       type: "map",
  //       map: "china", // 根据实际需求设置地图类型
  //       data: [
  //         // 根据分站的地址信息，提供对应的数据，例如省份、城市等
  //         // { name: substation.value.substationAddress.province, value: 10 }
  //         { name: "上海", value: 20 }
  //         // // ...
  //       ]
  //     }
  //   ]
  // };

  // // 渲染地图
  // chart.setOption(option);
});
// import { ElMessageBox, ElMessage } from "element-plus";

// const showDialog = () => {
//   const dialogVisible = ref(false);
//   const newName = ref("");
//   dialogVisible.value = true;
//   // 在这里设置显示对话框的逻辑，可以使用 Element Plus 的 Dialog 组件
//   ElMessageBox.prompt("请输入新的分站名称", "提示", {
//     confirmButtonText: "确定",
//     cancelButtonText: "取消",
//     inputPattern: /\S+/,
//     inputErrorMessage: "分站名称不能为空！",
//     inputValue: substation.value.substationName // 默认显示原始分站名称
//   })
//     .then(async ({ value }) => {
//       try {
//         newName.value = value; // 存储用户输入的新名称
//         await editSubstationName({ substationName: newName.value });
//         ElMessage.success({ message: `修改成功` });
//         // 显示自定义的对话框，并在其中放置表单用于修改分站名称
//         dialogVisible.value = false;
//       } catch (error) {
//         console.log(error);
//       }
//     })
//     .catch(() => {
//       // 用户点击了取消按钮，不执行修改操作
//     });
// };
</script>

<style scoped>
.substation-container {
  width: 100%;
  height: 100%;
}
.img-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.substation-card {
  width: 100%;
  height: 100%;
}
.substation-icon .icon {
  width: 5%;
  height: auto;
  margin-bottom: -2px;
}
.substation-card + .substation-card {
  margin-top: 20px;
}
</style>
